<template>
	<view class="searchBox">
		<view class="search">
			<u-search placeholder="我想找个CP" actionText="取消" v-model="keywords" @custom="cancelBtn"
				@search="onSearch"></u-search>
		</view>
		<view class="search">
			<view class="history dis-flex flex-x-between flex-y-center">
				<text class="txts">历史记录</text>
				<u-icon name="trash" color="#666" size="20" @click="_remove"></u-icon>
			</view>

			<view class="hotsearch">
				<view class="itemall dis-flex dis-wrap flex-x-start flex-y-center" v-if="HistoryjobList">
					<view class="item" v-for="(item,index) in HistoryjobList" :key="index" @click="Historyjob(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="hots">
				<view class="txts">热点搜索</view>
				<view class="list dis-flex flex-y-center" v-for="(item,index) in fireList" :key="index" @click="onFire(item)">
					<view class="dot"></view>
					<view class="flex-box ellip" >{{ item.search_content }}</view>
					<text class="nums">{{formattedLikeNum(item.fire)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchFire,
		searchContent,
		saveSearch
	} from '../../api/search.js'
	import st from "../../utlis/showtoast.js";
	export default {
		onLoad(on) {
			this.search_type = on.search_type
			this.type = on.type
		},
		data() {
			return {
				keywords: '',
				HistoryjobList: [],
				fireList: [],
				search_type: 0,
				search: '',
				type: 0,
				HotSpotList: [],
			}
		},
		mounted() {
			this.$nextTick(() => {
				if (uni.getStorageSync('HistoryjobList')) {
					this.HistoryjobList = JSON.parse(uni.getStorageSync('HistoryjobList'))
				}
			})
			this.fire()
		},
		methods: {
			//点击热点搜索
			onFire(item){
				console.log(item.search_content)
				this.$store.dispatch('updateSharedData', item.search_content);
				uni.showToast({
				    title: '搜索,即将跳转',
					icon:'loading',
				    duration: 900,
				});
				setTimeout(() => {
				    uni.navigateBack();
				}, 900);
			},
			//点击历史搜索
			Historyjob(item){
				console.log(item);
				this.$store.dispatch('updateSharedData', item);
				uni.showToast({
				    title: '搜索,即将跳转',
					icon:'loading',
				    duration: 900,
				});
				setTimeout(() => {
				    uni.navigateBack();
				}, 900);
			},
			//获取搜索热点
			async fire() {
				const res = await searchFire().then(res => {
					this.fireList = res.data
					console.log(this.fireList, '获取搜索热点列表');
				});
			},
			formattedLikeNum(likeNum) {
				if (likeNum >= 10000) {
					// 大于等于1万小于100万，显示 x.x 万
					return (likeNum / 10000).toFixed(1) + 'w';
				} else {
					// 其他情况直接显示数字
					return likeNum.toString();
				}
			},
			cancelBtn() {
				this.keywords = ''
			},
			onSearch() {
				if (this.keywords == '') return
				this.SearchVal(this.keywords); //保存到搜索历史中 
				this.$store.dispatch('updateSharedData', this.keywords);
				this.keywords = ''
				uni.showToast({
				    title: '搜索,即将跳转',
					icon:'loading',
				    duration: 900,
				});
				setTimeout(() => {
				    uni.navigateBack();
				}, 900);
			},
			//清除历史搜索
			_remove() {
				uni.showModal({
					title: '提示',
					content: '确定要清除吗',
					success: (res) => {
						if (res.confirm) {
							this.HistoryjobList = []
							uni.removeStorageSync('HistoryjobList')
						}
					}
				});
			},
			//本地保存搜索记录
			SearchVal(val) {
				val = val.trim() // 清除空格
				if (this.HistoryjobList.length > 0) { // 有数据的话 判断
					if (this.HistoryjobList.indexOf(val) !== -1) { // 有相同的，先删除 再添加 
						this.HistoryjobList.splice(this.HistoryjobList.indexOf(val), 1)
						this.HistoryjobList.unshift(val)
					} else { // 没有相同的 添加
						this.HistoryjobList.unshift(val)
					}
				} else { // 没有数据 添加
					this.HistoryjobList.unshift(val)
				}
				if (this.HistoryjobList.length > 6) { // 保留六个值
					this.HistoryjobList.pop()
				}
				uni.setStorageSync('HistoryjobList', JSON.stringify(this.HistoryjobList))
			},
		},

	}
</script>
<style lang="scss" scoped>
	.searchBox {
		width: 100%;

		.search {
			padding: 20rpx 30rpx;

			.history {
				.txts {
					font-weight: bold;
					font-size: 28rpx;
					color: $uni-text-color;
				}
			}

			.hotsearch {
				.itemall {
					.item {
						border: 1px solid #DDDDDD;
						padding: 8rpx 22rpx;
						margin-top: 24rpx;
						margin-right: 20rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: $uni-text-color;
					}
				}
			}

			.hots {
				margin-top: 60rpx;

				.txts {
					font-weight: bold;
					font-size: 28rpx;
					color: $uni-text-color;
				}

				.list {
					padding: 30rpx 0;
					border-bottom: 1px solid #EEE;

					.dot {
						width: 9rpx;
						height: 9rpx;
						border-radius: 50%;
						background: #000;
					}

					.flex-box {
						padding: 0 20rpx;
						font-size: 28rpx;
						color: $uni-text-color;
					}

					.nums {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>